<template>
    <div class="student-management">
        <div class="container">
            <div class="btnlist">
                <div class="leftbtn">
                    <a-button type="primary" style="margin-right: 30px;" @click="addStudent">新增</a-button>
                    <a-button :loading="loading" @click="batchDelete">批量删除</a-button>
                </div>
                <a-input-search
                    placeholder="输入关键词搜索"
                    enter-button="搜索"
                    style="width: 350px"
                    @search="onSearch"
                />
                <a-button type="primary" @click="exportData">导出</a-button>
            </div>
            <div class="table-box">
                <a-table
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                    :columns="columns"
                    :data-source="tableData"
                    :rowKey="(row, index) => {return row.no;}">
                    <template slot="operation" slot-scope="text, record">
                        <div class="oper-btn">
                            <a-button @click="() => editStudent(record)">编辑</a-button>
                            <a-button style="margin-left: 10px" type="danger" @click="() => deleteStudent(record)">删除</a-button>
                            <a-button style="margin-left: 10px" type="primary" @click="() => resetPass(record)">重置密码</a-button>
                        </div>
                    </template>
                </a-table>
            </div>
        </div>
        <a-modal v-model="addVisible" :title="title" centered>
            <div class="modal-box">
                <a-form-model :model="formData">
                    <a-form-model-item label="所属学校">
                        <a-select v-model="formData.school_id" style="width: 420px" placeholder="请选择所属学校（模糊检索）" @change="handleSchoolChange">
                            <a-select-option v-for="item in schoolData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="学籍号">
                        <a-input v-model="formData.no" style="width: 380px" placeholder="请输入学籍号" />
                    </a-form-model-item>
                    <a-form-model-item label="姓名" v-if="stype === 'edit'">
                        <a-input v-model="studentName" disabled style="width: 380px" placeholder="" />
                    </a-form-model-item>
                  <a-form-model-item label="姓名" v-if="stype === 'add'">
                    <a-input v-model="formData.name" style="width: 380px" placeholder="" />
                  </a-form-model-item>
                    <a-form-model-item label="所属班级">
                        <a-select v-model="formData.banji_ids" style="width: 420px" placeholder="请选择所属班级">
                            <a-select-option v-for="item in classData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <template slot="footer">
                <div class="foot-btn">
                    <span class="qxbtn" @click="addVisible = false">取消</span>
                    <span class="okbtn" @click="saveStudent">确定</span>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
  },
  {
    title: '学校',
    dataIndex: 'school_name',
  },
  {
    title: '学籍号',
    dataIndex: 'no',
  },
  {
    title: '学生姓名',
    dataIndex: 'name',
  },
  {
    title: '班级名称',
    dataIndex: 'banji_name',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time_text',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

export default {
    data() {
        return {
            columns,
            tableData: [],
            schoolData: [],
            classData: [],
            selectedRowKeys: [],
            loading: false,
            addVisible: false,
            title: '',
            formData: {
                school_id: '',
                no: '',
                name: '',
                banji_ids: '',
            },
            stype: 'add',
            studentName: ''
        };
    },
    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
        imageUrl() {
            return process.env.VUE_APP_IMAGE_URL; // 自动匹配当前环境
        }
    },
    mounted() {
        this.getStudentList();
        this.getSchoolList();
    },
    methods: {
        async getStudentList() {
            const res = await this.$request.get('api/school/student_list');
            if (res.code === 1) {
                res.data.data.forEach((item, index) => {
                    item.index = index + 1;
                });
                this.tableData = res.data.data || [];
            }
        },
        async getSchoolList() {
            const res = await this.$request.get('api/school/index');
            if (res.code === 1) {
                // console.log(res.data, 'res.datares.data');
                this.schoolData = res.data || [];
            }
        },
        handleSchoolChange(value) {
            console.log(`selected ${value}`);
            this.getClassList(value);
        },
        async getClassList(id) {
          this.formData.banji_ids = ''
            const res = await this.$request.get(`api/school/banji_list?school_id=${id}`);
            if (res.code === 1) {
                console.log(res.data, 'res.datares.data');
                this.classData = res.data || [];
            }
        },
        batchDelete() {
            this.loading = true;
            this.$request.post('api/school/del_student?no_list=' + this.selectedRowKeys.join(',')).then(res => {
                if (res.code == 1) {
                    this.loading = false;
                    this.selectedRowKeys = [];
                    this.$message.success('删除成功！')
                    this.getStudentList();
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
            console.log(this.selectedRowKeys, 'this.selectedRowKeys');
        },
        onSearch(value) {
            console.log(value);
            this.getStudentList();
        },
        addStudent() {
            this.title =  '新增学生';
            this.addVisible = true;
            this.stype = 'add';
            this.formData.no = '';
            this.formData.school_id = '';
            this.formData.banji_ids = '';
        },
        editStudent(record) {
            this.title =  '编辑学生';
            this.addVisible = true;
            this.stype = 'edit';
            this.formData.id = record.id;
            this.formData.no = record.no;
            this.formData.school_id = record.school_id;
            this.studentName = record.name;
            this.getClassList(record.school_id);
            this.formData.banji_ids = Number(record.banji_id);
        },
        resetPass(record) {
            this.$request.post('api/school/reset_student_pwd', { no: record.no}).then(res => {
                if (res.code == 1) {
                    this.$message.success('重置成功！')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        deleteStudent(record) {
            this.$request.post('api/school/del_student?no_list=' + record.no).then(res => {
                if (res.code == 1) {
                    this.$message.success('删除成功！')
                    this.getStudentList();
                } else {
                    this.$message.error(res.msg)
                }
            })
            console.log(record, 'record***------');
        },
        saveStudent() {
            if (this.stype == 'add') {
                this.$request.post('api/school/add_student', this.formData).then(res => {
                    if (res.code == 1) {
                        this.$message.success('添加成功！');
                        this.addVisible = false;
                        this.getStudentList();
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            } else {
                this.$request.post('api/school/edit_student', {no: this.formData.no, banji_ids: this.formData.banji_ids}).then(res => {
                    if (res.code == 1) {
                        this.$message.success('修改成功！');
                        this.addVisible = false;
                        this.getStudentList();
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        exportData() {
            this.$request.post(`api/school/export_student?banji_id=&school_id=&student_name=&no=`).then(res => {
                if (res.code == 1) {
                    const link = document.createElement('a');
                    link.href = this.imageUrl + res.data.filePath;
                    link.download = res.data.fileName;
                    link.click();
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
.student-management{
    width: 100%;
    .btnlist{
        display: flex;
        justify-content: space-between;
        padding-bottom: 28px;
    }
}
/deep/ .ant-modal-content{
    width: 856px;
    // height: 234px;
    background: linear-gradient( 180deg, #DFF1FF 0%, #FFFFFF 100%);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
}
/deep/ .ant-modal-header{
    background: none;
    border-bottom: none;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
}
/deep/ .ant-modal-footer{
    text-align: center;
    border-top: none;
}
.modal-box{
    text-align: center;
}
/deep/ .ant-form-item{
    display: flex;
    justify-content: center;
}
.foot-btn{
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 306px;
    padding-bottom: 45px;
}
.qxbtn{
    width: 134px;
    height: 40px;
    line-height: 40px;
    background: #EDF5FF;
    border-radius: 100px;
    border: 1px solid #A1C3FF;
    font-weight: 400;
    font-size: 16px;
    color: #0082FF;
    cursor: pointer;
}
.okbtn{
    width: 134px;
    height: 40px;
    line-height: 40px;
    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
    border-radius: 100px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
</style>